<!-- eslint-disable -->
<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="车牌">
        <el-input v-model="searchForm.plate" placeholder="驾照类型"></el-input>
      </el-form-item>
      <el-form-item label="车型">
        <el-input v-model="searchForm.model" placeholder="驾照类型"></el-input>
      </el-form-item>
      <el-form-item label="教练">
        <el-input v-model="searchForm.coach" placeholder="驾照类型"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button
      :disabled="info.role !== 'admin'"
      type="primary"
      icon="el-icon-plus"
      style="margin-bottom: 50px; margin-top: 50px"
      @click="dialogVisible = true"
      >添加车辆</el-button
    >
    <el-table :data="carList" border style="width: 100%">
      <el-table-column prop="id" label="车辆编号" width="180" align="center"></el-table-column>
      <el-table-column
        prop="plate"
        label="车辆牌照"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="model"
        label="车辆型号"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="coach"
        label="所属教练"
        width="150"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="img"
        label="车辆图片"
        width="150"
        class="imgwrap"
        align="center"
      >
        <template v-slot="{ row }">
          <img :src="row.img" alt />
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="车辆状态"
        width="150"
        align="center"
      ></el-table-column>

      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="{ row, index }">
          <el-button
            @click="deleteCars(row)"
            type="danger"
            size="medium"
            icon="el-icon-delete"
            title="删除"
            :disabled="info.role !== 'admin'"
          ></el-button>
          <el-button
            type="warning"
            size="medium"
            icon="el-icon-mouse"
            :title="info.role == 'user' ? '没有权限' : '状态处理'"
            :disabled="info.role == 'user'"
            @click="toCheck(row)"
          ></el-button>
          <el-button
            type="info"
            size="medium"
            icon="el-icon-wind-power"
            :title="info.role == 'admin' ? '分配权限' : '没有权限'"
            @click="toChoose(row)"
            :disabled="info.role !== 'admin'"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[4, 6, 8, 10]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 添加车辆弹出框 -->
    <el-dialog title="添加车辆" :visible.sync="dialogVisible" width="30%">
      <!-- 这里写添加用户的表单 -->
      <el-form :model="form">
        <el-form-item label="车牌号">
          <el-input v-model="form.plate" placeholder="请输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="型号">
          <el-input v-model="form.model" placeholder="请输入型号"></el-input>
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="form.color" placeholder="请输入颜色"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="form.img" placeholder="请输入图片"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCarr">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改状态的表单 -->
    <el-dialog title="修改车辆状态" :visible.sync="checkStatus" width="30%">
      <el-select v-model="checkForm.status" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="checkStatus = false">取 消</el-button>
        <el-button type="primary" @click="updateCar">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分配教练表单 -->
    <el-dialog title="分配教练" :visible.sync="coachStatus" width="30%">
      <el-select v-model="coachForm.coach" placeholder="请选择">
        <el-option
          v-for="item in coachList"
          :key="item.value"
          :label="item.nickname"
          :value="item.nickname"
        >
        </el-option>
      </el-select>

      <span slot="footer" class="dialog-footer">
        <el-button @click="coachStatus = false">取 消</el-button>
        <el-button type="primary" @click="assignment">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>
<script>
/*eslint-disable*/
import { carList, addCar, deleteCar, update, assignment ,searchCar} from "@/api/car";
import { allcoach } from "@/api/coach";
import { mapState } from "vuex";
export default {
  data() {
    return {
      dialogVisible: false,
      total: 0,
      pagesize: 4,
      pageNumber: 1,
      carList: [],
      form: {
        plate: "",
        model: "",
        color: "",
        img: "",
      },
      dialogVisible: false,
      checkStatus: false,
      options: [
        {
          value: "爆胎",
          label: "爆胎",
        },
        {
          value: "发动机故障",
          label: "发动机故障",
        },
        {
          value: "未知故障",
          label: "未知故障",
        },
        {
          value: "修理中",
          label: "修理中",
        },
        {
          value: "正常使用",
          label: "正常使用",
        },
      ],
      checkForm: {
        status: "",
        id: null,
      },
      coachList: [],
      coachForm: { id: null, coach: null },
      coachStatus: false,
      searchForm:{
        plate:null,
        model:null,
        coach:null
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
      this.getCarList();
    },
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.getCarList();
    },
    async getCarList() {
      let res = await carList({
        pagesize: this.pagesize,
        pageNumber: this.pageNumber,
      });
      if (res.code == 200) {
        this.carList = res.data;
        this.total = res.totalCount;
      }
    },
    async addCarr() {
      let res = await addCar(this.form);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        console.log(res, "添加车辆");
        this.getCarList()
        this.dialogVisible = false;
        this.form = {};
      }
    },
    async deleteCars(row) {
      let res = await deleteCar(row.id);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarList();
      }
    },
    toCheck(row) {
      this.checkStatus = true;
      this.checkForm.id = row.id;
    },
    async updateCar() {
      this.checkStatus = false;
      let res = await update(this.checkForm);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarList();
      }
    },
    //  获取教练列表
    async getCoachList() {
      let res = await allcoach();
      if (res.code == 200) {
        this.coachList = res.data;
        console.log(res);
      }
    },
    // 前往添加教练页面
    toChoose(row) {
      this.coachStatus = true;
      this.coachForm.id = row.id;
    },
    // 分配教练
    async assignment() {
      this.coachStatus = false;
      let res = await assignment(this.coachForm);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.getCarList();
      }
    },
    async search() {
      if (this.searchForm.plate == "") this.searchForm.plate = null;
      if (this.searchForm.model == "") this.searchForm.model = null;
      if (this.searchForm.coach == "") this.searchForm.coach = null;
      if (this.searchForm.plate == null && this.searchForm.model==null&&this.searchForm.coach==null){
        this.getCarList()
        return
      }
     
      let res = await searchCar(this.searchForm);
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.carList = res.data;
        this.total = res.data.length;
      }
     
     
    },
  },
  mounted() {
    this.getCarList();
    this.getCoachList();
  },
  computed: {
    ...mapState({
      info: (store) => store.user.info,
    }),
  },
};
</script>

<style scoped>
img {
  width: 130px;
  height: 130px;
  margin-right: 15px;
}
.box-card {
  width: 1200px;
  margin-left: 50px;
  margin-top: 50px;
}
</style>
